<template>
    <el-form :model="tableData" ref="ruleFormRef">
        <el-table ref="multipleTableRef" class="multiple-table" :data="lowCodeStore.ListDesign.listConfig.sortConfig.tableData.tableList" max-height="400">
            <el-table-column property="chineseName" label="显示中文名" width="400">
                <template #default="scope">
                    <el-form-item :prop="'tableList.' + scope.$index + '.chineseName'">
                        <el-select v-model="scope.row.chineseName" clearable placeholder="选择或者输入中文名">
                            <el-option v-for="item in options_chineseName" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column property="fieldName" label="显示字段名">
                <template #default="scope">
                    <el-form-item :prop="'tableList.' + scope.$index + '.fieldName'">
                        <el-input v-model="scope.row.fieldName" clearable placeholder="请输入字段名"></el-input>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column property="sort" label="排序">
                <template #default="scope">
                    <el-form-item :prop="'tableList.' + scope.$index + '.sort'">
                        <el-select v-model="scope.row.sort" clearable placeholder="选择或者输入中文名">
                            <el-option key="asc" label="升序" value="asc" />
                            <el-option key="desc" label="降序" value="desc" />
                        </el-select>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template #default="scope"><el-button type="primary" link class="is-link-i"
                        @click="handleRemoveItem(scope)">删除</el-button></template>
            </el-table-column>
            <template #empty v-if="tableData.tableList.length === 0"><el-empty description="无数据"></el-empty></template>
        </el-table>
    </el-form>

    <div style="margin-top: 15px;"><el-button type="info" size="small" :icon="Plus"
            @click="handleAddItem">新增一行</el-button>
    </div>

    <!-- <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
    </el-button> -->
</template>

<script setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import pinia from "@/store/pinia";
import { useStore } from "@/store/lowCode.js";
const lowCodeStore = useStore(pinia);

const ruleFormRef = ref()

const tableData = ref({
    tableList: [
        {
            chineseName: '',
            fieldName: '',
            sort: 'desc',
        }
    ]
})

const options_chineseName = ref([{
    value: "用户名",
    label: "用户名",
}, {
    value: "密码",
    label: "密码",
}]);

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            console.log(lowCodeStore.ListDesign.listConfig.sortConfig.tableData.tableList);
        } else {
            console.log('error submit!', fields)
        }
    })
}

const handleAddItem = () => {
    lowCodeStore.ListDesign.listConfig.sortConfig.tableData.tableList.push({
        chineseName: '',
        fieldName: '',
        sort: 'desc',
    });
}

const handleRemoveItem = (scope) => {
    const index = lowCodeStore.ListDesign.listConfig.sortConfig.tableData.tableList.indexOf(scope.row);
    if (index !== -1) {
        lowCodeStore.ListDesign.listConfig.sortConfig.tableData.tableList.splice(index, 1);
    }
}
</script>

<style lang="less" scoped>
@import "./index.css";
</style>